<template>


    <div class="logbox">
        <div class="header">
            {{ headerTit }}
            <span class="h-left"></span>
            <span class="h-right"></span>
        </div>
        <router-view></router-view>
    </div>


</template>

<script>
export default {
    data(){
        return {
            headerTit:'登录管理平台'
        }
    },
    methods:{
        setHeaderTit:function(path){
            // 根据获取到的路径地址设置对应的title
            if( path === '/login'){
                this.headerTit = '登录管理平台'
            }else if( path === '/signup'){
                this.headerTit = '注册管理账户'
            }else{
                this.headerTit = ''
            }
        }
    },
    watch:{
        $route(to){
            this.setHeaderTit(to.path);
        }
    }
    
}
</script>

<style>

.logbox{
    width: 460px;
    min-height: 400px;
    background: white;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.header{
    height: 120px;
    background: #0371D1;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    position: relative;
    overflow: hidden;
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 120px;
}
.header > span{
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%; 
    position: absolute;  
}
.h-left{
    width: 200px;
    height: 200px;
    top: 40px;
    left: -100px;
}
.h-right{
    width: 100px;
    height: 100px;
    top: -20px;
    right: -20px;
}




</style>
